<!-- Transaction Details -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<div class="modal-head" style="over-flow-y: auto;z-index: 9000;"
		id="transaction-detail" tabindex="-1" role="dialog"
		aria-labelledby="transaction-detail-label" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
						
					<h3 class="modal-title" id="transaction-detail-label">Transaction Detail</h3>
				</div><br/><br/>
				<div class="modal-body">
					<div style="font-weight: 700; color: #1b59ab">
						<span style="font-size: 2.5em; border-bottom: 2px solid #ccc; border-top-width: 0px;
						-webkit-border-image: -webkit-gradient(linear, 0, 0, 100%, 0, from(#ccc), to(#f9f9f9)) 100%;
						-webkit-border-image: -webkit-gradient(left, #ccc, #f9f9f9) 100%; -o-border-image: -0-linear-gradient(
						left, #ccc, #f9f9f9) 100%; -moz-border-image: -moz-linear-gradient(left, #ccc, #f9f9f9) 100%, 1;">
						Checking Account 988207684</span>
						<span style="font-size: 3em; border-top-width: 0px; -100% 1; -o-border-image: -0-linear-gradient(
						left, #ccc, #f9f9f9) 100% 1;"></span>
					</div><br>
					<div style="background: rgba(214,210,0.22); border: 1px solid #ccc; clear: both; overflow: hidden;">
						<table width="100%">
							<colgroup>
								<col width="50%">
								<col width="50%">
							</colgroup>
							<tr>
								<td colspan="2"><span class="fieldLabel">Description</span></td>
							</tr>
							<tr>
								<td colspan="2"><span>SERVICE FEE REVERSAL</span></td>
							</tr>
							<tr>
								<td colspan="2"><span>&nbsp;</span></td>
							</tr>
							<tr>
								<td><span class="fieldLabel">Transaction Date/Time</span></td>
								<td><span class="fieldLabel">Merchant Phone #</span></td>
							</tr>
							<tr>
								<td>01-20-2015:08:30:00</td>
								<td>717-623-3337</td>
							</tr>
							<tr>
								<td><span class="fieldLabel">Returned or Paid</span></td>
								<td><span class="fieldLabel">Posting Status</span></td>
							</tr>
							<tr>
								<td>Data not Available</td>
								<td></td>
							</tr>
							<tr>
								<td><span class="fieldLabel">Transaction Code</span></td>
								<td><span class="fieldLabel">Trans Code Description</span></td>
							</tr>
							<tr>
								<td>3854</td>
								<td>Service Fee: (Credit)</td>
							</tr>
						</table>
					</div><br>
				<div class="modal-footer" style="height: 40px; text-align: center;">
					<div style="margin-top: 0px;">
						<button class="button-secondary" type="button" data-dismiss="modal">
							<span class="left" onmouseover="javascript:this.style.curser = 'pointer'"></span>
							<span class="middle" onmouseover="javascript:this.style.curser = 'pointer'">Close</span>
							<span class="right" onmouseover="javascript:this.style.curser = 'pointer'"></span>
						</button>
					</div>
				</div>
				</div>
			</div>
		</div>
</div>


<!-- Account Details -->
<div class="modal-head" style="over-flow-y: auto;z-index: 9000;"
		id="account-detail" tabindex="-1" role="dialog"
		aria-labelledby="account-detail-label" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
						
					<h3 class="modal-title" id="account-detail-label">Account Detail</h3>
				</div><br/><br/>
				<div class="modal-body" style="height: 400px; margin: 10px; overflow-y: auto;">
					<div style="width: 100%; border: 1px solid darkgrey;">
						<fieldset>
							<legend>
								<span style="font-size: 1.3em; border-bottom: 2px solid #ccc; border-top-width: 0px;
									-webkit-border-image: -webkit-gradient(linear, 0, 0, 100%, 0, from(#ccc), to(#f9f9f9)) 100%;
									-webkit-border-image: -webkit-gradient(left, #ccc, #f9f9f9) 100%; -o-border-image: -0-linear-gradient(
									left, #ccc, #f9f9f9) 100%; -moz-border-image: -moz-linear-gradient(left, #ccc, #f9f9f9) 100%, 1;">
									Related Customers</span>							
							</legend>
						</fieldset>
						<div class="qr">
							<table width="100%" class="transactionDataTable">
								<thead>
									<tr style="background: #C0C0C0; color: #000;">
										<td><span class="fieldLabel">Name</span></td>
										<td><span class="fieldLabel">Relationship</span></td>
										<td><span class="fieldLabel">Taxpayer ID</span></td>
										<td><span class="fieldLabel">Date of Birth</span></td>
									</tr>
								</thead>
								<tbody>
									<tr class="odd">
										<td>Ran Gurung</td>
										<td>Sole Owner</td>
										<td>XX-XXX7732</td>
										<td>XX/XX/1985</td>
									</tr>
									<tr class="even">
										<td>Ran Gurung</td>
										<td>Sole Owner</td>
										<td>XX-XXX7732</td>
										<td>XX/XX/1985</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<fieldset>
							<legend>
								<span style="font-size: 1.3em; border-bottom: 2px solid #ccc; border-top-width: 0px;
									-webkit-border-image: -webkit-gradient(linear, 0, 0, 100%, 0, from(#ccc), to(#f9f9f9)) 100%;
									-webkit-border-image: -webkit-gradient(left, #ccc, #f9f9f9) 100%; -o-border-image: -0-linear-gradient(
									left, #ccc, #f9f9f9) 100%; -moz-border-image: -moz-linear-gradient(left, #ccc, #f9f9f9) 100%, 1;">
									Saving Account 929362339</span>							
							</legend>
						</fieldset>
						<table width="100%">
							<tr>
								<td><span class="fieldLabel">Current Balance</span></td>
								<td><span class="fieldLabel">Available Balance</span></td>
								<td><span class="fieldLabel">Over Draft</span></td>
								<td><span class="fieldLabel">Returned Checks</span></td>
							</tr>
							<tr>
								<td>$10,000</td>
								<td>$0.00</td>
								<td>0</td>
								<td>0</td>
							</tr>
							<tr>
								<td><span class="fieldLabel">Opened</span></td>
								<td><span class="fieldLabel">Status</span></td>
								<td><span class="fieldLabel">Restricted</span></td>
							</tr>
							<tr>
								<td>01-09-2013</td>
								<td>Open</td>
								<td>Others</td>
							</tr>
						</table>
						<br>
					<div style="width: 100%; border: 1px solid darkgrey;">
						<fieldset>
							<legend>
								<span style="font-size: 1.3em; border-bottom: 2px solid #ccc; border-top-width: 0px;
									-webkit-border-image: -webkit-gradient(linear, 0, 0, 100%, 0, from(#ccc), to(#f9f9f9)) 100%;
									-webkit-border-image: -webkit-gradient(left, #ccc, #f9f9f9) 100%; -o-border-image: -0-linear-gradient(
									left, #ccc, #f9f9f9) 100%; -moz-border-image: -moz-linear-gradient(left, #ccc, #f9f9f9) 100%, 1;">
									All Transactions</span>							
							</legend>
						</fieldset>
						<div class="qr">
							<table width="100%" class="transactionDataTable">
								<thead>
									<tr style="background: #C0C0C0; color: #000;">
										<td width="10%"><span class="fieldLabel">Date Posted</span></td>
										<td width="15%"><span class="fieldLabel">Tran Type</span></td>
										<td width="45%"><span class="fieldLabel">Description</span></td>
										<td width="9%"><span class="fieldLabel">$ Debit</span></td>
										<td width="9%"><span class="fieldLabel">$ Credit</span></td>
										<td width="10%"><span class="fieldLabel">Balance</span></td>
										<td width="2%">&nbsp;</td>
									</tr>
								</thead>
								<tbody>
									<tr class="odd">
										<td>01-20-2015</td>
										<td>Interest</td>
										<td>Interest Payment</td>
										<td></td>
										<td>$300.09</td>
										<td>$10,000</td>
										<td></td>
									</tr>
									<tr class="even">
										<td>01-28-2015</td>
										<td>Interest</td>
										<td>Interest Payment</td>
										<td>$500</td>
										<td>$300.09</td>
										<td>$10,000</td>
										<td></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="modal-footer" style="height: 40px; text-align: center;">
					<div style="margin-top: 0px;">
						<button class="button-secondary" type="button" data-dismiss="modal">
							<span class="left" onmouseover="javascript:this.style.curser = 'pointer'"></span>
							<span class="middle" onmouseover="javascript:this.style.curser = 'pointer'">Close</span>
							<span class="right" onmouseover="javascript:this.style.curser = 'pointer'"></span>
						</button>
					</div>
				</div>
				</div>
			</div>
		</div>
</div>










